<script setup name="DangKouTongJi">
import "splitpanes/dist/splitpanes.css"
import {ref} from 'vue';
const appStore = useAppStore()
import {Pane, Splitpanes} from "splitpanes";
import {get} from '@/api/system/request.js';
import useAppStore from "@/store/modules/app.js";

import {translateTuiHuoStatue} from '@/utils/dict.js';

const {proxy} = getCurrentInstance();
const queryParams = ref({});
const gongYingShangList = ref([]);
const loading = ref(false);
const tongJi = ref([]);
const dataList = ref([]);

const methods = {
  handleQuery: async function(){
    console.log(queryParams.value);
    let rsp = await get("/system/gongYingShangTongJi/tongJi", {
      id:  queryParams.value.gongYingShangId,
      startDay:  queryParams.value.date[0],
      endDay:  queryParams.value.date[1]
    });
    console.log(rsp);
    dataList.value = rsp.data.details;
    tongJi.value = [];
    tongJi.value.push(rsp.data.tongJi);
  },

  loadAllGongYingShang: async function(){
    let rsp = await get("/system/gongYingShangUser/listAll", {});
    console.log(rsp);
    gongYingShangList.value = rsp.rows;
  },

  handleExport: async function(){
    proxy.download("/system/gongYingShangTongJi/export", {
      id:  queryParams.value.gongYingShangId,
      startDay:  queryParams.value.date[0],
      endDay:  queryParams.value.date[1]
    },`供应商汇总.xlsx`);
  }
}

methods.loadAllGongYingShang();

</script>

<template>
  <div class="app-container">
    <el-row :gutter="24">
      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
        <pane size="84">
          <el-col>
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">

              <el-form-item label="选择供应商" prop="name">
                <el-select v-model="queryParams.gongYingShangId" style="width: 240px">
                  <el-option v-for="item in gongYingShangList" :label="item.userName" :value="item.userId" />
                </el-select>
              </el-form-item>

              <el-form-item label="时间" prop="name">
                <el-date-picker v-model="queryParams.date"
                    :default-value="[new Date( ), new Date( )]"
                    type="daterange" range-separator="至" value-format="YYYY-MM-DD"
                    start-placeholder="开始时间" end-placeholder="结束时间"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" icon="Search" @click="methods.handleQuery">搜索</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" icon="Grid" @click="methods.handleExport">导出</el-button>
              </el-col>
            </el-row>

            <el-table v-loading="loading" :data="tongJi" width="100%">
              <el-table-column label="供应商号" align="center" prop="gongYingShangId"  />
              <el-table-column label="供应名称" align="center" prop="gongYingShangName"  />
              <el-table-column label="开始日期" align="center" prop="startDay"  />
              <el-table-column label="结束日期" align="center" prop="endDay"  />
              <el-table-column label="采购总价" align="center" prop="money"  />
              <el-table-column label="退货总价" align="center" prop="tuiHuoMoney"  />
              <el-table-column label="合计" align="center" prop="realMoney"  />
            </el-table>

            <el-table v-loading="loading" :data="dataList" width="100%">
              <el-table-column label="货品编号" align="center" prop="huoPinId"  />
              <el-table-column label="货品名称" align="center" prop="huoPinName"  />
              <el-table-column label="入库日期" align="center" prop="ruKuTime"  />
              <el-table-column label="入库数量" align="center" prop="ruKuCount"  />
              <el-table-column label="入库价格" align="center" prop="ruKuPrice"  />
              <el-table-column label="总价" align="center" prop="ruKuZongJia"  />
              <el-table-column label="是否已退货" align="center" prop="tuiHuo"  >
                <template #default="scope">
                  {{translateTuiHuoStatue(scope.row.tuiHuo)}}
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </pane>
      </splitpanes>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>